<!DOCTYPE HTML>
<html>
  <head>
    <title>Todo</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <script src="/scripts/miniui/miniui.js"></script>
    <!--<script src="/ui/jquery.min.js"></script>-->
    <!--<link rel="stylesheet" href="/ui/miniui.css">-->
    <!--<script src="/ui/miniui.js"></script>-->
  </head>
  <body>
  <h1>Pagination 分页表格</h1>

  <div style="padding-bottom:5px;">

    <span>员工姓名：</span><input type="text" id="key"/>
    <input type="button" value="查找" onclick="search()"/>


  </div>
  <div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"
       url="../data/AjaxService.aspx?method=SearchEmployees" idField="id" allowResize="true"
       sizeList="[20,30,50,100]" pageSize="20"
  >
    <div property="columns">
      <div type="indexcolumn"></div>
      <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
      <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
      <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
      <div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>
      <div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
      <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
    </div>
  </div>
  <h1><%= title %></h1>
    <form action="/todos" method="POST">
      <input type="text" name="content" />
      <input type="submit" value="新增" />
    </form>
    <ul>
      <% for(var i=0; i<todos.length; i++) {%>
      <li><%= todos[i].get('content') %></li>
      <% } %>
    </ul>
  </body>
  <script type="text/javascript">



      mini.parse();


      var grid = mini.get("datagrid1");


      grid.load();


      function search() {
          var key = document.getElementById("key").value;
          grid.load({ key: key });
      }
      $("#key").bind("keydown", function (e) {
          if (e.keyCode == 13) {
              search();
          }
      });
      ///////////////////////////////////////////////////////
      var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
      function onGenderRenderer(e) {
          for (var i = 0, l = Genders.length; i < l; i++) {
              var g = Genders[i];
              if (g.id == e.value) return g.text;
          }
          return "";
      }
  </script>

  <div class="description">
    <h3>Description</h3>

  </div>
</html>
